<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器-子元素过滤器first-child和last-child和only-child和nth-child</title>
</head>
<script src="./jquery1.11.3.js"></script>
<script>
    $(function () {
        // $('li:first-child').css('background','gray');//获取li每个父元素的第一个元素 先找li的父元素分组 在找第一个元素
        // $('li:last-child').css('background','gray');//获取li每个父元素的最后一个元素 先找li的父元素分组 在找最后一个元素
        // $('li:only-child').css('background','gray');//获取li父元素的只有一个子元素的父元素 先找li的父元素 在找只有一个子元素的ul

        // $('li:nth-child(even)').css('background','yellow');//获取li的所有偶数行 索引从1开始
        // $('li:nth-child(odd)').css('background','yellow');//获取li的所有奇数行 索引从1开始
        // $('li:nth-child(3)').css('background','yellow');//获取先找li的父元素分组  再找索引值为3的li

    });
</script>
<body>
<script>
    /*子元素过滤器
    *   通过父元素与子元素的关系获得目标DOM元素对象
    *       1.$('li:first-child')获取每个父元素的第一个子元素
    *       2.$('li:last-child')获取每个父元素的最后一个子元素
    *       3.$('li:only-child') 获取每个自定义元素的元素
    *       4.$('li:nth-child(even)') 获取每个自定义元素的元素 ()里的参数是索引值 从1开始的  偶数
    * */
</script>
    <ul>
        <li>标签1</li>
        <li>标签1</li>
        <li>标签1</li>
        <li>标签1</li>
        <li>标签1</li>
    </ul>
    <ul>
        <li>标签1</li>
        <li>标签1</li>
        <li>标签1</li>
        <li>标签1</li>
        <li>标签1</li>
    </ul>
    <ul>
        <li>标签1</li>
    </ul>
    <ul>
        <li>标签1</li>
        <p>123</p>
    </ul>
</body>
</html>